<template>
  <div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
      <h1>
        系统管理
        <small>修改密码</small>
      </h1>
      <ol class="breadcrumb">
        <li>
          <router-link to="/main/frontData">
            <i class="fa fa-cog"></i>
            系统管理
          </router-link>
        </li>
        <li class="active">修改密码</li>
      </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">
      <!-- 修改密码 -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">修改密码</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
          <div class="box-body">
            <div class="form-group">
              <label for="userId">用户Id:</label>
              <input type="text" class="form-control" id="userId" :value="userId" data-cip-id="userId" disabled>
            </div>
            <div class="form-group">
              <label for="username">用户名:</label>
              <input type="text" class="form-control" id="username" :value="username" data-cip-id="username" disabled>
            </div>
            <div class="form-group">
              <label for="oldPassword">旧密码</label>
              <input type="password" class="form-control" id="oldPassword" v-model="oldPassword" placeholder="旧密码" data-cip-id="oldPassword">
            </div>
            <div class="form-group">
              <label for="newPassword">新密码</label>
              <input type="password" class="form-control" id="newPassword" v-model="newPassword" placeholder="新密码" data-cip-id="newPassword">
              <label for="newPasswordRepeat"></label>
              <input type="password" class="form-control" id="newPasswordRepeat" v-model="confirmedPassword" placeholder="请再输入一遍" data-cip-id="newPasswordRepeat">
            </div>
            <div>
              <p class="alert alert-danger hidden" id="message">message</p>
            </div>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <button type="button" class="btn btn-primary" @click="changePassword">修改密码</button>
          </div>
        </form>
      </div>
      <!-- /.row -->
    </section>
    <!-- 正文区域 /-->

  </div>
</template>

<script>
export default {
  name: "ChangePassword",
  data(){
    let userInfo = JSON.parse(localStorage.getItem("repoUserInfo"));
    if(userInfo===null)
      userInfo = JSON.parse(sessionStorage.getItem("repoUserInfo"));
    return {
      userInfo: userInfo,
      userId: userInfo.id,
      username: userInfo.username,
      oldPassword: "",
      newPassword: "",
      confirmedPassword: ""
    }
  },
  methods:{
    changePassword(){
      if(this.newPassword===""&&this.confirmedPassword==="")
        this.$message.error("新密码不能为空");
      else {
        if(this.newPassword!==this.confirmedPassword)
          this.$message.error("两次输入密码不一致");
        else {
          if(this.oldPassword!==this.userInfo.password)
            this.$message.error("旧密码错误，请重新输入后尝试修改");
          else {
            let index = this.GLOBAL.appData.userList.findIndex((e)=>{
              return e.id===this.userId;
            });
            this.GLOBAL.appData.userList[index].password = this.newPassword;
            this.$alert("密码修改成功", '提示', {
              confirmButtonText: '确定',
              type: "success"
            });
            $('.el-message-box').css('width','250px');
            this.$router.push('/main/frontData');
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
